import React, { Component } from "react";
import { mid2Url } from "@ali/ding-mediaid";
import DDAvatar from "../../components/Avatar";

import numberConverter from "../../utils/numberConverter.js"

export default class AnnualList extends Component {
    constructor(props) {
        super(props);
    }

    renderDayBlock(day, data) {
        const month = this.props.month;
        const day_text =  `${month}月${day}日`
        const list_items = []
        for (const v of data) {
            list_items.push(
                <div className="list_item">
                    <DDAvatar
                        name={v.userName}
                        fontSize={28}
                        width={66}
                        avatar={v.avatar && mid2Url(v.avatar, { imageSize: "thumb" })}
                        className="avatar"
                    />
                    <div className="name_dept">
                        <p className="name">{v.userName}</p>
                        <p className="dept">{v.deptName || <span>&nbsp;</span>}</p>
                    </div>
                </div>
            )
        }
        return (
            <div className="day_block_container">
                <div className="day">{day_text}</div>
                <div className="list_items_container">
                    {list_items}
                </div>
            </div>
        );
    }

    renderAnnualBlock(annual, data) {
        const day_blocks = [];
        const block_data = data[0]
        for (const key in block_data) {
            day_blocks.push(this.renderDayBlock(key, block_data[key]))
        }
        return (
            <div>
                <h5 className="annual_num">入职{numberConverter.numberToChinese(annual)}周年</h5>
                <div className="day_blocks_container">
                    {day_blocks}
                </div>
            </div>
        );
    }

    render() {
        const data = this.props.data;
        const count = this.props.count;
        const annual_blocks = [];
        const showManage = this.props.showManage;
        for (const key in data) {
            annual_blocks.push(this.renderAnnualBlock(key, data[key]));
        }
        if (count === 0) {
            return (
                <div className={`scroll-body memorial-body${!showManage ? " no-padding-bottom" : ""}`}>
                    <div className="no_data_block">
                        <img src="https://gw.alicdn.com/tfs/TB1CTKAcY_I8KJjy1XaXXbsxpXa-229-205.png" alt=""/>
                        <p>本月没有同事周年纪念</p>
                        {   showManage && this.props.notHaveAnnualEmpTotalNum && this.props.notHaveAnnualEmpTotalNum > 0 &&
                            <p className="notify_message">
                                {this.props.notHaveAnnualEmpTotalNum}位同事没有入职日期
                            </p>
                        }
                    </div>
                </div>
            )
        }
        return (
            <div className={`scroll-body memorial-body${!showManage ? " no-padding-bottom" : ""}`}>
                <div className="memorial_emp_list" >
                    {annual_blocks}
                </div>
                {   showManage && this.props.notHaveAnnualEmpTotalNum && this.props.notHaveAnnualEmpTotalNum > 0 &&
                    <p className="notify_message">
                        {this.props.notHaveAnnualEmpTotalNum}位同事没有入职日期
                    </p>
                }
            </div>
        );
    }
}